<template>
  <div class="map-container" ref="editorContainer">
    <div class="map" ref="mapContainer"></div>
    <div class="tool-box">
      <div class="tools">
        <el-tooltip content="打开项目" placement="left">
          <el-upload
              accept=".json"
              class="background-upload"
              :on-change="onOpenProject"
              :before-upload="() => false"
            >
            <span class="icon icon-open"></span>
          </el-upload>
        </el-tooltip>
        <el-tooltip content="保存项目" placement="left">
          <span class="icon icon-save" @click="editor.saveProject()"></span>
        </el-tooltip>
      </div>
      <div class="tools">
         <div class="search" :visible="editor.status.searching">
          <input type="text" id="searchInput" @keyup="searchPlace" v-model="searchContent">
          <div class="search-results">
            <div class="search-result-item"
              :key="item.name"
              v-for="item in searchResults"
              @click="() => moveToPlace(item)"
            >{{item.name}}</div>
          </div>
        </div>
        <el-tooltip content="搜索" placement="left">
          <span
            :class="`icon icon-search`"
            @click="editor.showSearch()"
          ></span>
        </el-tooltip>
        <el-tooltip :content="isEditBoundary ? '确认' : '设置边界'" placement="left">
          <span
            :class="`icon icon-${isEditBoundary ? 'confirm' : 'boundary'}${isEditBoundary ? ' icon-selected' : ''}`"
            @click="editor.editBoundary()"
          ></span>
        </el-tooltip>
      </div>
      <div class="tools">
       
        <el-tooltip :content="isNewPolyline ? '确认' : '创建多段线'" placement="left">
          <span :class="`icon icon-${isNewPolyline ? 'confirm' : 'polyline'}${isNewPolyline ? ' icon-selected' : ''}`" @click="editor.newPolyline()"></span>
        </el-tooltip>
        <el-tooltip :content="isNewPolygon ? '确认' : '创建多边形'" placement="left">
          <span :class="`icon icon-${isNewPolygon ? 'confirm' : 'polygon'}${isNewPolygon ? ' icon-selected' : ''}`" @click="editor.newPolygon()"></span>
        </el-tooltip>
        <el-tooltip :content="'添加标记点'" placement="left">
          <span class="icon icon-location" @click="editor.newMarker()"></span>
        </el-tooltip>
      </div>
      <div class="tools">
        <el-tooltip :content="isEditingOverlay ? '确认' : '编辑'" placement="left">
          <span :class="`icon icon-${isEditingOverlay ? 'confirm' : 'edit'}${isSelectedOverlayEditable ? '' : ' icon-disable'}${isEditingOverlay ? ' icon-selected' : ''}`" @click="editor.editOverlay()"></span>
        </el-tooltip>
        <el-tooltip content="删除" placement="left">
          <span :class="`icon icon-delete${hasSelectedOverlay ? '' : ' icon-disable'}`" @click="editor.deleteOverlay()"></span>
        </el-tooltip>
      </div>
      <div class="tools">
        <!-- <el-tooltip content="导入GeoJSON" placement="left">
          <span class="icon icon-import" @click="editor.exportGeoJSON()"></span>
        </el-tooltip> -->
        <el-tooltip content="导出GeoJSON" placement="left">
          <span class="icon icon-export" @click="editor.exportGeoJSON()"></span>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { debounce } from "lodash";
import { BOUNDARY, editor, STATUS_EDIT_BOUNDARY, STATUS_EDIT_POLYLINE, STATUS_EDIT_POLYLON, STATUS_NEW_POLYLINE, STATUS_NEW_POLYLON } from "../core/Editor";
import { setupHotkey } from "../core/hotkeys";


const mapContainer = ref(null);
const editorContainer = ref(null);
const autoOptions = {};
let autoComplete, placeSearch;

const searchResults = reactive([]);
const searchContent = ref("");
const hasSelectedOverlay = computed(() => editor.selectedOverlay.info != null);
const isSelectedOverlayEditable = computed(() => hasSelectedOverlay.value && editor.selectedOverlay.type !== BOUNDARY);
const isNewPolygon = computed(() => editor.status.editing && editor.status.type === STATUS_NEW_POLYLON);
const isNewPolyline = computed(() => editor.status.editing && editor.status.type === STATUS_NEW_POLYLINE);
const isEditBoundary = computed(() => editor.status.editing && editor.status.type === STATUS_EDIT_BOUNDARY);
const isEditingOverlay = computed(() => editor.status.editing && (editor.status.type === STATUS_EDIT_POLYLON || editor.status.type === STATUS_EDIT_POLYLINE) );

const onOpenProject = (file) => {
  const reader = new FileReader();
  reader.onload = function() {
    const options = JSON.parse(this.result);
    editor.openProject(options);
  };
  reader.readAsText(file.raw);
};

onMounted(() => {
  setupHotkey(editorContainer.value);
  const map = new AMap.Map(mapContainer.value, {
    center: [116.387175, 39.876405],
    zoom: 16,
  });
  editor.setMap(map);
  window.amap = map;
  autoComplete= new AMap.AutoComplete(autoOptions);
  placeSearch = new AMap.PlaceSearch({map});
});

const searchPlace = debounce((e) => {
  if (autoComplete == null) return;
  const keyword = searchContent.value;
  autoComplete.search(keyword, (status, result) => {
    if (status !== "complete") return;
    searchResults.length = 0;
    searchResults.push(...result.tips);
  });
}, 500);

const moveToPlace = (item) => {
  // console.log(item);
  searchContent.value = item.name;
  searchResults.length = 0;
  placeSearch.setCity(item.adcode);
  placeSearch.search(item.name);
}

</script>

<style scoped>
.map-container {
  flex: 1;
  position: relative;
}
.map {
  height: 100%;
}
.tool-box {
  position: absolute;
  top: 20px;
  right: 20px;
}
.tool-box .tools{
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}
.tool-box .icon {
  display: block;
}
.tools .search{
  position: absolute;
  height: 40px;
  right: 48px;
  top: 0;
  width: 0px;
  transition: all .4s ease;
}
.tools .search[visible=true]{
  width: 220px;
}
#searchInput{
  width: 100%;
  height: 38px;
  outline: none;
  border: none;
  border-radius: 8px;
  text-indent: 10px;
  font-size: 16px;
  color: rgb(56, 56, 56);
}
.tools .search[visible=true] #searchInput{
  border: 1px solid #000;
}
.search-results{
  border: 1px solid #ccc;
  background: #f1f1f1;
}
.search-result-item{
  cursor: pointer;
  padding: 4px 8px;
}
.layer-popover{
  width: 1px;
  height: 1px;
}
.search-result-item:hover{
  background: rgb(130, 163, 255);
}
</style>